<template>
  <div id="x-button">
    <el-input v-if="isShowInput" v-model="content" @input="onChangeVal" style="margin-right:8px"></el-input>
    <el-button size="mini" type="primary" @click="changeUnit">{{ title }}</el-button>
  </div>
</template>
  
  <script>
export default {
  name: "InputColorPicker",
  emits:['onChangeVal'],
  props: {
    unit: {
        default () {
            return ['inherit', 'px', 'em', '%']
        }
    },
    value:{
      default () {
            return 0
        }
    }
  },
  created () {
    this.title = this.unit[0]
    this.content = this.value
  },
  data () {
    return {
      content:'',
      title:''
    }
  },
  computed: {
    isShowInput: function () {
      
      if (this.title) {
        if (
          this.title === "px" ||
          this.title === "em" ||
          this.title === "%"
        ) {
          return true;
        } else {
          return false;
        }
      }
      return false
    },
  },
  methods:{
    changeUnit() {
        let nextUnit = ''
      
        for (let i = 0; i < this.unit.length; i ++) {
            if(this.unit[i] === this.title && (i < this.unit.length - 1)) {
                nextUnit = this.unit[i + 1]
                continue;
            }
        }
        if (!nextUnit) {
          nextUnit = this.unit[0]
        }
        this.title = nextUnit
        this.onChangeVal()
    },
    onChangeVal () {
      if (this.title === 'px' || this.title === 'em' || this.title === '%') {
        this.$emit('onChangeVal',this.content  + this.title)
  
      }else {
        this.$emit('onChangeVal','')
      }

    },

  }
};
</script>
  
  <style>
  #x-button {
    display: flex;
    flex-wrap: nowrap;
  }
</style>